<template>
  <div id="shop-info" class="disFlex vertical shadow">
    <div class="Flex scroll">
      <!-- <div class="pannel-title">增值电信业务经营许可证</div>

            <div class="protocol-wrapper disFlex">
                <div class="title"><span style="color: #f00">*</span>ICP编号</div>
                <div class="Flex">
                    <Input v-model="protocol.icpNumber" style="width: 300px" placeholder="请输入标题" type="tetx" />
                    <p class="tip">ICP编号为增值电信业务经营许可证左上角的经营许可证编号，例如：粤B2-20090059</p>
                </div>
                <div id="protocol"></div>
            </div>

            <div class="protocol-wrapper disFlex">
                <div class="title"><span style="color: #f00">*</span>协议图片</div>
                <div class="Flex">
                    <div class="img-wrapper">
                        <img :src="protocol.mallProtocolImage" class="img" />
                        <up-load @confirmUpload="mallProtocolImageOK" :multiple="true" :spread="true"></up-load>
                    </div>
                </div>
                <div id="protocol"></div>
      </div>-->

      <!-- <div class="pannel-title">平台营业执照</div>
            
            <div class="protocol-wrapper disFlex">
                <div class="title"><span style="color: #f00">*</span>营业执照</div>
                <div class="Flex">
                    <div class="img-wrapper">
                        <img :src="protocol.mallLicenceImage" class="img" />
                        <up-load @confirmUpload="mallLicenceImageOK" :multiple="true" :spread="true"></up-load>
                    </div>
                </div>
                <div id="protocol"></div>
      </div>-->
      <div class="pannel-title">求职方服务协议</div>

      <div class="protocol-wrapper disFlex">
        <div class="title">
          <span style="color: #f00">*</span>协议名称
        </div>
        <div class="Flex">
          <Input
            v-model="protocolInfo.worker_protocol_title"
            style="width: 300px"
            placeholder="请输入标题"
            type="tetx"
          />
        </div>
      </div>

      <div class="protocol-wrapper disFlex">
        <div class="title">
          <span style="color: #f00">*</span>协议内容
        </div>
        <div class="Flex">
          <div id="protocol"></div>
          <!-- <Input
            type="textarea"
            v-model="protocolInfo.worker_protocol_content"
            :autosize="{minRows: 2,maxRows: 5}"
            placeholder="Enter something..."
            style="width:300px"
          ></Input>-->
        </div>
      </div>

      <div class="protocol-wrapper disFlex">
        <div class="title"></div>
        <div class="Flex disFlex document">
          <div class="disFlex Flex-middle Flex-center vertical">
            <Icon class="doc-icon" type="md-document" />
            <div class="text">《求职方服务协议模板》</div>
            <a class="href" :href="workerDocument">点击下载</a>
          </div>
        </div>
      </div>
      <div class="pannel-title">招聘方服务协议</div>
      <div class="protocol-wrapper disFlex">
        <div class="title">
          <span style="color: #f00">*</span> 协议名称
        </div>
        <div class="Flex">
          <Input
            v-model="protocolInfo.company_protocol_title"
            style="width: 300px"
            placeholder="请输入标题"
            type="tetx"
          />
        </div>
      </div>
      <div class="protocol-wrapper disFlex">
        <div class="title">
          <span style="color: #f00">*</span> 协议内容
        </div>
        <div class="Flex">
          <div id="privacy"></div>
          <!-- <Input
            type="textarea"
            v-model="protocolInfo.company_protocol_content"
            :autosize="{minRows: 2,maxRows: 5}"
            placeholder="Enter something..."
            style="width:300px"
          ></Input>-->
        </div>
      </div>

      <div class="protocol-wrapper disFlex">
        <div class="title"></div>
        <div class="Flex disFlex document">
          <div class="disFlex Flex-middle Flex-center vertical">
            <Icon class="doc-icon" type="md-document" />
            <div class="text">《招聘方服务协议模板》</div>
            <a class="href" :href="companyDocument">点击下载</a>
          </div>
        </div>
      </div>
      <!-- </div> -->

      <!-- <div class="pannel-title" style="border:none">隐私协议</div> -->
    </div>

    <div class="bottom-wrapper flex center column-center">
      <Button @click.stop="update" type="primary" size="default">保存</Button>
    </div>
  </div>
</template>

<script>
import Config from '@/config';
import { Protocol, ProtocolUpdate } from "api/recuit/setting";
const UEDITOR_HOME_URL = "https://file.open.banchengyun.com/ueditor/";
export default {
  data () {
    return {
      protocolInfo: {
        company_protocol_content: "",
        company_protocol_title: "",
        worker_protocol_content: "",
        worker_protocol_title: ""
      },
      myConfig: {
        serverUrl: `https://job.banchengyun.com/admin/ueditor/index`,
        initialFrameWidth: '80%',
        initialFrameHeight: '500',
        UEDITOR_HOME_URL,
        autoHeightEnabled: false,
        autoFloatEnabled: false,
        toolbars: [[
          'fullscreen', 'source', '|', 'undo', 'redo', '|',
          'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
          'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
          'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
          'directionalityltr', 'directionalityrtl', 'indent', '|',
          'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
          'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
          'simpleupload', 'attachment', 'insertframe', 'insertcode', 'webapp', 'pagebreak', 'template', 'background', '|',
          'horizontal', 'date', 'time', 'snapscreen', 'wordimage', '|',
          'insertrow', 'deleterow', 'insertcol', 'deletecol', 'splittocols', '|',
          'searchreplace', 'drafts'
        ]],
      },
      companyDocument:
        "http://file.open.banchengyun.com/video/%E6%8B%9B%E8%81%98%E6%96%B9%E6%9C%8D%E5%8A%A1%E5%8D%8F%E8%AE%AE%E6%A8%A1%E6%9D%BF.docx",
      workerDocument:
        "http://file.open.banchengyun.com/video/%E6%B1%82%E8%81%8C%E6%96%B9%E6%9C%8D%E5%8A%A1%E5%8D%8F%E8%AE%AE%E6%A8%A1%E6%9D%BF.docx"
    };
  },
  created () {
    this.getProtocol();
  },
  mounted () { },
  methods: {
    // 编辑器初始化
    // ueditorInit() {

    // },
    async getProtocol () {
      try {
        let { data } = await Protocol();
        let arrEntities = {
          lt: "<",
          gt: ">",
          amp: "&",
          nbsp: " ",
          quot: '"'
        };
        console.log(data, '123123')
        data.company_protocol_content = data.company_protocol_content.replace(
          /&(lt|gt|nbsp|amp|quot);/gi,
          function (all, t) {
            return arrEntities[t];
          }
        );
        data.worker_protocol_content = data.worker_protocol_content.replace(
          /&(lt|gt|nbsp|amp|quot);/gi,
          function (all, t) {
            return arrEntities[t];
          }
        );
        this.protocolInfo = data;
        // this.secretDocument = data.secretDocument;
        // this.serviceDocument = data.serviceDocument;
        this.$nextTick(() => {
          setTimeout(() => {
            // this.ueditorInit();
            window.UEDITOR_CONFIG = Object.assign(window.UEDITOR_CONFIG, {
              xssFilterRules: false,
              //input xss过滤
              inputXssFilter: false,
              //output xss过滤
              outputXssFilter: false,
              // 关闭右键菜单
              enableContextMenu: false
            });
            this["UEPROTROL" + this.Time] = UE.getEditor(
              "protocol",
              this.myConfig
            );
            this["UEPRIVATE" + this.Time] = UE.getEditor(
              "privacy",
              this.myConfig
            );

            this["UEPROTROL" + this.Time].ready(() => {
              this["UEPROTROL" + this.Time].setContent(
                data.worker_protocol_content
              );
            });
            this["UEPRIVATE" + this.Time].ready(() => {
              this["UEPRIVATE" + this.Time].setContent(data.company_protocol_content);
            });

            this["UEPROTROL" + this.Time].addListener("contentChange", () => {
              this.protocolInfo.worker_protocol_content = this[
                "UEPROTROL" + this.Time
              ].getContent();

              clearTimeout(this.timer1);
              this.timer1 = setTimeout(() => {
                this.protocolInfo.worker_protocol_content = this[
                  "UEPROTROL" + this.Time
                ].getContent();
              }, 2000);
            });

            this["UEPRIVATE" + this.Time].addListener("contentChange", () => {
              this.protocolInfo.company_protocol_content = this[
                "UEPRIVATE" + this.Time
              ].getContent();

              clearTimeout(this.timer2);
              this.timer2 = setTimeout(() => {
                this.protocolInfo.company_protocol_content = this[
                  "UEPRIVATE" + this.Time
                ].getContent();
              }, 2000);
            });
          }, 1000);
        });
      } catch (err) {
        if (err.message) {
          this.$Message.error(err.message);
        }
      }
    },
    // async getProtocol() {
    //   try {
    //     let data = await Protocol();
    //     if (data.data) {
    //       this.protocolInfo = data.data;
    //     }
    //     // this.companyDocument = data.companyDocument
    //     // this.workerDocument = data.workerDocument
    //   } catch (err) {
    //     if (err.message) {
    //       this.$Message.error(err.message);
    //     }
    //   }
    // },
    async update () {
      try {
        let res = await ProtocolUpdate(this.protocolInfo);
        this.$Message.success("更新成功");
      } catch (err) {
        if (err.message) {
          this.$Message.error(err.message);
        }
      }
    }
  },
  components: {}
};
</script>

<style scoped lang="less">
#clear-cache {
  margin-left: 10px;
}
#shop-info {
  position: relative;
  width: auto;
  height: calc(100vh - 88px);
  background: white;
  margin: 24px 24px 0 24px;
}
.form-wrapper {
  width: 100%;
  height: calc(100vh - 124px);
  padding: 20px 0;
}
.form-content {
  margin-left: 250px;
  height: 100%;
}
.upload-operate-wrapper {
  display: flex;
  align-items: center;
}
.upload-operate-wrapper span {
  color: darkgray;
  margin-left: 6px;
}
.upload-img-btn {
  position: relative;
}
.upload-img-btn input {
  position: absolute;
  opacity: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.upload-img {
  margin-top: 10px;
  border: 1px solid #f2f2f2;
}
.cropper-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
.cropper-content {
  width: 200px;
  height: 200px;
}
.bottom-wrapper {
  width: 100%;
  height: 60px;
  // position: absolute;
  background: white;
  left: 0;
  bottom: 0;
  border: 1px solid #e8eaec;
}
.pannel-title {
  background: #f5f7f9;
  color: black;
  padding: 10px;
  margin: 15px;
  font-size: 14px;
}
.protocol-wrapper {
  padding: 20px;
  .img-wrapper {
    position: relative;
    width: 160px;
    min-height: 90px;
    border: 1px solid #dddddd;
    .img {
      width: 100%;
    }
  }
  .tip {
    color: #999;
    margin-top: 8px;
  }
  .title {
    color: #333333;
    margin-right: 10px;
    font-size: 13px;
    margin-top: 2px;
    width: 70px;
  }
  .document {
    margin-left: -5px;
    .doc-icon {
      font-size: 40px;
    }
    .text {
      font-size: 14px;
      color: #666;
    }
    .href {
      font-size: 13px;
      color: #2d8cf0;
    }
  }
}
#protocol {
  width: 100%;
}
</style>

<style type="text/css">
</style>